﻿<template>
  <div class="deviceTemplateInfo-container">
    <el-dialog v-model="isShowDialog" width="90%" :close-on-click-modal="false">
      <template #header>
        <div style="color: #fff">
          <span>{{ title }}</span>
        </div>
      </template>
      <el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
        <el-row>
          <el-col :span="24">
            <el-tabs v-model="activeTab">
              <el-tab-pane
                v-for="(template, index) in deviceTemplates"
                :key="index"
                :label="template.slaveName"
                :name="index.toString()"
              >
                <!-- 你可以根据需要添加更多的表单项 -->
                <device-slave-template-points :deviceSlaveTemplateId="template.id+''" :deviceId="deviceId"/>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
      </el-card>
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>
:deep(.el-select),
:deep(.el-input-number) {
	width: 100%;
}
</style>
<script lang="ts" setup>
	import { ref,onMounted } from "vue";
	import { ElMessage } from "element-plus";
	import type { FormRules } from "element-plus";
	import { getDictDataItem as di, getDictDataList as dl } from '/@/utils/dict-utils';
	import { getDictLabelByVal as dv } from '/@/utils/dict-utils';
	import { formatDate } from '/@/utils/formatTime';
	import { addDeviceTemplateInfo, updateDeviceTemplateInfo, detailDeviceTemplateInfo } from "/@/api/Device/Template/deviceTemplateInfo";
	import { getAPI } from '/@/utils/axios-utils';
	import { SysEnumApi } from '/@/api-services/api';
	import { pageDeviceSlaveTemplate,addDeviceSlaveTemplate,deleteDeviceSlaveTemplate } from '/@/api/Device/Template/deviceSlaveTemplate';
	import DeviceSlaveTemplatePoints from '/@/views/Device/Template/deviceSlaveTemplatePointsValue/index.vue'; // 确保路径正确
import { t } from "@wangeditor/editor";
import { useRoute } from 'vue-router';


	//从路由里获取templateInfoId
	const templateInfoId = ref<string | null>(null);
	const route = useRoute();
	const deviceId = ref("");
	var newIndex=1;
	var deviceTemplateInfoId="";
	//父级传递来的函数，用于回调
	const emit = defineEmits(["reloadTable"]);
	const ruleFormRef = ref();
	const isShowDialog = ref(false);
	const title = ref("设备模板信息");
	const ruleForm = ref<any>({});
	//自行添加其他规则
	const rules = ref<FormRules>({
		cusdeviceOfflineDecision: [{required: true, message: '请输入离线时间！', trigger: 'blur',},],
		templateName: [{required: true, message: '请输入模板名称！', trigger: 'blur',},],
	});

	const activeTab = ref('0');
    const deviceTemplates = ref<any>([
       
    ]);
	// 页面加载时
	onMounted(async () => {
		//isShowDialog.value = true;
	
	});
	
	// 获取设备模板的方法
	const fetchDeviceTemplates = async () => {
        try {
            const queryParams = {
                deviceTemplateInfoId:templateInfoId.value,
				deviceId:deviceId.value,
				DescStr:"descending"
            };
            const response = await pageDeviceSlaveTemplate(queryParams);
            deviceTemplates.value = response.data.result.items; // 假设返回的数据在 response.data 中
			console.log(deviceTemplates.value)
        } catch (error) {
            ElMessage.error('获取设备模板失败:'+error);
        }
    };


	// 关闭弹窗
	const closeDialog = () => {
		emit("reloadTable");
		isShowDialog.value = false;
	};
// 打开对话框
const openDialog = async (deviceIdParam: string,templateInfoIdParam: string ) => {
	deviceTemplates.value=[];
  templateInfoId.value = templateInfoIdParam;
  deviceId.value = deviceIdParam;
  isShowDialog.value = true;
  await fetchDeviceTemplates();
};
	// 取消
	const cancel = () => {
		isShowDialog.value = false;
	};

	// 提交
	const submit = async () => {
		try {
			ruleFormRef.value.validate(async (isValid: boolean, fields?: any) => {
			if (isValid) {
				let values = ruleForm.value;
				values.deviceSlaveTemplates = deviceTemplates.value;
				if (ruleForm.value.id == undefined || ruleForm.value.id == null || ruleForm.value.id == "" || ruleForm.value.id == 0) {
					await addDeviceTemplateInfo(values);
				} else {
					await updateDeviceTemplateInfo(values);
				}
				closeDialog();
			} else {
				ElMessage({
					message: `表单有${Object.keys(fields).length}处验证失败，请修改后再提交`,
					type: "error",
				});
			}
		});
		} catch (error) {
			ElMessage({
					message: `提交失败:${error}`,
					type: "error",
				});
		}
		
	};






	//将属性或者函数暴露给父组件
	defineExpose({ openDialog });
</script>




